<template>
  <div>
    <el-card class="ep-card ep-search" size="small">
      <el-form :model="searchForm" label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="报表编号" size="small">
              <el-input v-model="searchForm.tmpCode" placeholder="请输入报表编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="报表名称" prop="name" size="small">
              <el-input v-model="searchForm.tmpName" placeholder="请输入报表名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="报表类型" prop="resource" size="small">
              <el-radio-group v-model="searchForm.tmpType" size="small">
                <el-radio label="1">年报</el-radio>
                <el-radio label="0">月报</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="small" @click="getList">查询</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="add">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="ep-card" style="height: calc(100vh - 280px);">
      <el-table :data="tableData" border :height="height" size="mini" style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column prop="tmpCode" align="center" label="报表编号">
        </el-table-column>
        <el-table-column prop="tmpName" align="center" show-overflow-tooltip label="报表名称">
        </el-table-column>
        <el-table-column prop="tmpType" align="center" show-overflow-tooltip label="报表类型" :formatter="tmpTypeFor">
        </el-table-column>
        <el-table-column prop="name" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="addKmmx(scope.row)">科目明细</el-button>
            <el-button type="text" size="mini" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" size="mini" @click="down(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-card style="text-align:right;">
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[ 10, 20,30, 40]" :page-size="pageSize" background layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
      </el-card>
    </el-card>
    <el-dialog title="新增模板" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
      <el-form :model="reportTemplate" ref="reportTemplate" label-width="80px">
        <!--基础表新增-->
        <el-form-item label="报表编号" size="small">
          <el-input v-model="reportTemplate.tmpCode" placeholder="必填项" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="报表名称" size="small">
          <el-input v-model="reportTemplate.tmpName" placeholder="必填项" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="报表类型" size="small">
          <el-radio-group v-model="reportTemplate.tmpType">
            <el-radio label="1">年报</el-radio>
            <el-radio label="0">月报</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 文件上传 -->
        <el-form-item size="small" label="模板上传">
          <el-upload multiple style="display:inline-block" class="upload-demo" ref="upload" action="/hqx/knowledge/importKnowledge" :file-list="fileList" :http-request="uploadSectionFile" :limit="1" :auto-upload="false">
            <el-button slot="trigger" size="mini" type="primary" plain>选取文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleFormClose" size="small">取 消</el-button>
        <el-button type="primary" @click="doSave" size="small">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      reportTemplate: {
        id: "",
        tmpCode: "",
        tmpName: "",
        tmpType: ""
      },
      searchForm: {
        tmpCode: "",
        tmpName: "",
        tmpType: ""
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      fileList: []
    };
  },
  computed: {
    height() {
      return `calc(100vh - 350px)`;
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    //table翻译 报表类型
    tmpTypeFor: function(row, column) {
      return row.tmpType == "1" ? "年报" : "月报";
    },
    //新增科目明细
    addKmmx(row) {
      console.log(row);
      this.$router.push({
        path: "/insert/temp",
        query: {
          tempId: row.id,
          tmpCode: row.tmpCode,
          tmpName: row.tmpName,
          tmpType: row.tmpType
        }
      });
    },
    //新增
    add() {
      this.reportTemplate.id = "";
      this.reportTemplate.tmpCode = "";
      this.reportTemplate.tmpName = "";
      this.reportTemplate.tmpType = "";
      this.dialogTableVisible = true;
    },
    //保存方法
    doSave() {
      if (this.reportTemplate.tmpCode == "") {
        this.$message.error("请输入模板编号");
        return;
      }
      if (this.reportTemplate.tmpName == "") {
        this.$message.error("请输入模板名称");
        return;
      }
      if (this.reportTemplate.tmpType == "") {
        this.$message.error("请选择报表类型");
        return;
      }
      //id为空时候新增 反之编辑
      if (this.reportTemplate.id == "") {
        let list = document.getElementsByClassName(
          "el-upload-list__item is-ready"
        );
        if (list.length == 0) {
          this.$message({
            type: "warning",
            message: "请选择需要上传的模板！"
          });
          return;
        }
        this.$refs.upload.submit();
      } else {
        let list = document.getElementsByClassName(
          "el-upload-list__item is-ready"
        );
        if (list.length == 0) {
          //当文件没有修改时
          this.saveNoWj();
        } else {
          //当文件修改时
          this.$refs.upload.submit();
        }
      }
    },
    saveNoWj() {
      // 文件对象
      let fdata = new FormData();
      fdata.append("id", this.reportTemplate.id);
      fdata.append("tmpCode", this.reportTemplate.tmpCode);
      fdata.append("tmpName", this.reportTemplate.tmpName);
      fdata.append("tmpType", this.reportTemplate.tmpType);
      this.$api.formDataPost("/api/biz/finTemplate/doSave", fdata).then(res => {
        if (res.retHead.code == "0000000") {
          this.handleFormClose();
          this.$message({
            type: "success",
            message: "编辑成功!"
          });
          this.getList();
        } else {
          this.$message.error("上传失败，失败原因为" + res.retBody);
          return;
        }
      });
    },
    //文件上传请求方法
    uploadSectionFile(param) {
      let user = JSON.parse(sessionStorage.getItem("user"));
      var fileObj = param.file;
      let fdata = new FormData();
      // 文件对象
      fdata.append("file", fileObj);
      console.log(this.reportTemplate.id);
      if (this.reportTemplate.id == "") {
        fdata.append("id", this.reportTemplate.id);
        fdata.append("tmpCode", this.reportTemplate.tmpCode);
        fdata.append("tmpName", this.reportTemplate.tmpName);
        fdata.append("tmpType", this.reportTemplate.tmpType);
        fdata.append("createUserId", user.id);
        fdata.append("createUserName", user.realName);
        fdata.append("createTime", new Date());
      } else {
        fdata.append("id", this.reportTemplate.id);
        fdata.append("tmpCode", this.reportTemplate.tmpCode);
        fdata.append("tmpName", this.reportTemplate.tmpName);
        fdata.append("tmpType", this.reportTemplate.tmpType);
      }
      this.$api.formDataPost("/api/biz/finTemplate/doSave", fdata).then(res => {
        if (res.retHead.code == "0000000") {
          if (this.reportTemplate.id == "") {
            this.$message({
              type: "success",
              message: "保存成功!"
            });
          } else {
            this.$message({
              type: "success",
              message: "编辑成功!"
            });
          }
          this.handleFormClose();
          this.fileList = [];
          this.getList();
        } else {
          this.$Message.error("上传失败，失败原因为" + res.retBody);
          return;
        }
      });
    },
    //取消
    handleFormClose() {
      this.reportTemplate.id = "";
      this.reportTemplate.tmpCode = "";
      this.reportTemplate.tmpName = "";
      this.reportTemplate.tmpType = "";
      this.dialogTableVisible = false;
    },
    // 修改
    edit(row) {
      this.reportTemplate.id = row.id;
      this.reportTemplate.tmpCode = row.tmpCode;
      this.reportTemplate.tmpName = row.tmpName;
      this.reportTemplate.tmpType = row.tmpType;
      this.dialogTableVisible = true;
    },
    //下载
    down(row) {
      // +"&filePath="+row.filePath
      window.location.href =
        this.baseURL +
        "/api/biz/finTemplate/dcExcel?Auth-User-Token=" +
        sessionStorage.getItem("token") +
        "&finId=" +
        row.id;
    },

    // 获取条件列表
    getList() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        tmpCode: this.searchForm.tmpCode,
        tmpName: this.searchForm.tmpName,
        tmpType: this.searchForm.tmpType
      };
      this.$api.formPost("/api/biz/finTemplate/doGetList", params).then(res => {
        if (res.retHead.code === "0000000") {
          this.tableData = res.retBody;
          this.total = res.retBody.total;
          this.currentPage = res.retBody.pageNum;
        }
      });
    },

    sizeChange(n) {
      this.pageSize = n;
      this.getList();
    },
    currentChange(n) {
      this.currentPage = n;
      this.getList();
    }
  }
};
</script>
